/*

@description: 仓配服务样式

@author: 赖赖

@update: 2021年9月3日17:51:30

 */

 
 // 全局参数
 @width:1200px;
 @color:rgb(34,38,50);
 @btcolor:rgb(198, 43, 37);
 @btfont-size:38px;

//主体
 main{

    // 仓配服务
    .cpfw{
        height: 440px;
        background: url('https://www.jdl.cn/_nuxt/img/banner.48b3f3e.jpg');
        
        hgroup{//主体
            width: @width;
            margin: auto;
            display: flex;
            flex-direction:column;
            justify-content:center;

            h1{//标题1
                margin-top: 110px;
                font-size: 45px;
                color: rgb(250,250,250);
            }

            h2{//标题2
                margin-top: 35px;
                font-size: 16px;
                color: rgb(250,250,250);
            }
        }
    }

    //仓配供应链
    .cpl{
        height: 500px;
        background: rgb(248, 248, 248);
        .zt{
            width: @width;
            margin: auto;

            h1{//标题
                padding-top: 35px;
                margin-bottom: 28px;
                font-size: @btfont-size;
                color: @btcolor;
                text-align: center;
            }
            div{//照片
                width: @width;
                height: 345px;
                overflow: hidden;
                background: url('https://www.jdl.cn/_nuxt/img/service.80cb719.png');
            }
        }
    }

    // 商务仓/经济仓
    .c{

        .t{//图
            float: left;
            .sw{//商务
                .t1{//图1
                    width: 800px;
                    height: 440px;
                    background: url('https://www.jdl.cn/_nuxt/img/business-class-bg.e70ec78.png');
                    position: relative;
        
                    .mb{//幕布
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        background: rgb(250,250,250);
                        opacity: 0.2;
                    }
                }
            }

            .sm{//说明
                width: 450px;
                height: 100%;
                float: right;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                h1{//标题
                    font-size: 38px;
                    color: rgb(250,250,250);
                }

                p{//段落
                    font-size: 14px;
                    text-align:justify;
                    color: rgb(250,250,250);
                    width: 250px;
                    padding-top: 10px;
                    margin-top: 30px;
                    line-height: 25px;
                    border-top: 2px solid rgb(250,250,250);
                }
            }
            
            .jj{//经济
                .t2{
                    width: 800px;
                    height: 440px;
                    background: rgb(192, 36, 30) ;
                }
            }
        }
        
        .wz{//文字
            box-sizing: border-box;

            .js{//介绍总体
                width: 760px;
                height: 440px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
                border-bottom: 1px dashed rgb(235, 235, 235);
                
                nav{//单个介绍
                    width: 290px;
                    height: 90px;
                    float: left;
                    padding-top: 24px;
                    border-bottom: 1px solid rgb(235, 235, 235);
    
                    h1{//标题
                        font-size: 16px;
                        font-weight: 700;
                        padding-bottom: 10px;
                    }
    
                    p{//段落
                        line-height: 20px;
                        color: rgb(102, 102, 102);
                    }
                }
            }
        }
    }

    //到仓服务
    .dcfw{
        height: 410px;
        background: url('https://www.jdl.cn/_nuxt/img/warehousing-bg.2dcab8e.jpg');
        
        hgroup{//标题
            h1{
                padding-top: 35px;
                margin-bottom: 15px;
                font-size: @btfont-size;
                color: @btcolor;
                text-align: center; 
            }
            h2{
                font-size: 14px;
                text-align: center; 
            }
        }

        div{//内容
            width: @width;
            margin: auto;
            display: flex;
            justify-content: space-around;

            article{//单个内容
                width: 155px;
                height: 150px;
                margin-top: 100px;
                border-bottom: 2px solid rgb(198, 43, 37);

                h3{
                    font-size: 16px;
                    margin-bottom: 30px;
                }
                p{
                    font-size: 14px;
                    text-align: center;
                }
            }
        }
    }

    //LWL物流科技
    .kj{
        height: 400px;
        background: url('https://www.jdl.cn/_nuxt/img/X-shiyebupic@2x-pc.1ddc4ad.png');
        h1{//标题
            padding-top: 35px;
            margin-bottom: 15px;
            font-size: @btfont-size;
            color: rgb(250,250,250);
            text-align: center;
        }
        h2{
            font-size: 20px;
            color: rgb(210,211,217);
            text-align: center;
        }

        nav{//科技介绍
            width: 888px;
            margin: auto;
            display: flex;
            justify-content: space-around;

            div{
                margin-top: 50px;
                
                img{
                    width: 192px;
                    height: 125px;
                    background-size: cover;
                }
            }
            h4{
                font-size: 16px;
                text-align: center;
                color: rgb(250,250,250);
            }
        }
    }

    //售后仓
    .sh{
        .jj{//经济
            .t2{
                float: left;
                width: 800px;
                height: 440px;
                background: rgb(192, 36, 30) ;

                .sm{//说明
                    width: 450px;
                    height: 100%;
                    float: right;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
    
                    h1{//标题
                        font-size: 38px;
                        color: rgb(250,250,250);
                    }
    
                    p{//段落
                        font-size: 14px;
                        text-align:justify;
                        color: rgb(250,250,250);
                        width: 250px;
                        padding-top: 10px;
                        margin-top: 30px;
                        line-height: 25px;
                        border-top: 2px solid rgb(250,250,250);
                    }
                }
            }
        }

        .wz{//文字
            box-sizing: border-box;

            .js{//介绍总体
                width: 760px;
                height: 440px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
                border-bottom: 1px dashed rgb(235, 235, 235);
                
                nav{//单个介绍
                    width: 290px;
                    height: 90px;
                    float: left;
                    padding-top: 24px;
                    border-bottom: 1px solid rgb(235, 235, 235);
    
                    h1{//标题
                        font-size: 16px;
                        font-weight: 700;
                        padding-bottom: 10px;
                    }
    
                    p{//段落
                        line-height: 20px;
                        color: rgb(102, 102, 102);
                    }
                }
            }
        }
    }

    //特色服务
    .ts{
        height: 440px;
        margin-bottom: 200px;
        background: url('https://www.jdl.cn/_nuxt/img/warehousing-bg.2dcab8e.jpg');
        
        hgroup{//标题
            h1{
                padding-top: 35px;
                margin-bottom: 15px;
                font-size: @btfont-size;
                color: @btcolor;
                text-align: center; 
            }
            h2{
                font-size: 14px;
                text-align: center; 
            }
        }

        nav{//特点介绍
            width: @width;
            margin: auto;
            display: flex;
            justify-content: space-around;

            div{
                margin-top: 50px;
                
                img{
                    width: 70px;
                    height: 70px;
                    background-size: cover;
                }
            }
            h4{
                font-size: 16px;
                text-align: center;
            }
        }

        article{//说明
            width: @width;
            margin: auto;
            display: flex;
            justify-content: space-between;

            div{
                width: 288px;
                    height: 251px;
                margin-top: 50px;
                position: relative;

                aside{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgb(0, 0, 0);
                    opacity: 0.1;
                }
                
                hgroup{
                    position: absolute;
                    left: 0;
                    top: 0;
                    padding: 25px;
                    padding-top: 0;
                    h1{
                        font-size: 16px;
                        color: rgb(218, 218, 218);
                    }
                    p{
                        font-size: 14px;
                        color: rgb(250,250,250);
                        line-height: 25px;
                    }
                }
                
                img{
                    width: 288px;
                    height: 251px;
                    background-size: cover;
                }
            }
        }
    }
 }